<template>
  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);
let chartInstance = null;

// 生命周期钩子：组件挂载后初始化图表
onMounted(async () => {
  // 1. 创建ECharts实例
  chartInstance = echarts.init(chartRef.value);
  // 2. 从后端获取数据
  const response = await uni.request({
      url: 'http://172.16.24.120:5000/mysqlchart/get_test_data1',
	  method: 'POST'
  });
    console.log('后端返回的数据:', response.data);
    
    // 提取 dataset 数据
    const datasetSource = response.data.data.dataset.source;
  // 3. 配置图表选项
  const options = {
      // X 轴为类目轴，自动从 dataset 中获取 round_number 列
      xAxis: {
        type: 'category',
        name: '轮次'
      },
      
      // Y 轴为数值轴
      yAxis: {
        type: 'value',
        name: '分数'
      },

      // 设置数据集
      dataset: {
        source: datasetSource
      },
      
	// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
    series: [
        {
          name: '用户1',
          type: 'line',
          encode: {
            x: 'round_number',  // 指定 x 轴对应 dataset 中的 round_number 列
            y: 'user1_score'    // 指定 y 轴对应 dataset 中的 user1_score 列
          },
          color: '#165DFF',
          smooth: true,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(22, 93, 255, 0.4)' },
                { offset: 1, color: 'rgba(22, 93, 255, 0)' }
              ]
            }
          }
        },
        {
          name: '用户2',
          type: 'line',
          encode: {
            x: 'round_number',
            y: 'user2_score'
          },
          color: '#FF6B3B',
          smooth: true
        },
        {
          name: '用户3',
          type: 'line',
          encode: {
            x: 'round_number',
            y: 'user3_score'
          },
          color: '#36B37E',
          smooth: true
        },
        {
          name: '用户4',
          type: 'line',
          encode: {x: 'round_number',
					y: 'user4_score'},
          color: '#FFAB00',
          smooth: true
        }
      ],
	// 其他配置
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      legend: {
        type: 'scroll',
        orient: 'horizontal',
        bottom: '5%',
        left: 'center',
		 selectedMode: 'multiple' // 显式启用多选模式
      }
  };
  
  // 4. 设置图表选项
  chartInstance.setOption(options);
  
  // 5. 添加响应式处理
  window.addEventListener('resize', handleResize);
});

// 生命周期钩子：组件卸载前清理
onUnmounted(() => {
  if (chartInstance) {
    window.removeEventListener('resize', handleResize);
    chartInstance.dispose();
  }
});

// 窗口大小变化时重绘图表
const handleResize = () => {
  chartInstance.resize();
};
</script>